import React, { useState } from "react";
import Prism from "./Prism";
import { createPortal } from "react-dom";

type Table = {
    sql: string;
    records: any[];
};

export default function Sql({ data }: { data: Table[] }) {
    const [visible, setVisible] = useState(false);

    return (
        <>
            <button onClick={() => setVisible(true)}>查看</button>
            {visible &&
                createPortal(
                    <div className="fixed top-0 left-0 z-10 w-full h-full">
                        <div
                            className="absolute w-full h-full bg-black/75"
                            onClick={() => setVisible(false)}
                        ></div>
                        <div className="absolute z-20 w-1/2 flex flex-col left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                            {data.map((item, index) => (
                                <table
                                    key={index}
                                    className="w-full bg-white text-2xl text-black rounded-lg text-center w-1/2 mb-24"
                                >
                                    <thead>
                                        <tr>
                                            <th className="p-4" colSpan={2}>
                                                <Prism
                                                    code={item.sql}
                                                    lang="sql"
                                                    className="text-2xl"
                                                />
                                            </th>
                                        </tr>
                                        <tr>
                                            {Object.keys(item.records[0]).map(
                                                (key, index) => (
                                                    <th
                                                        className={"p-4 border"}
                                                        key={index}
                                                    >
                                                        {key}
                                                    </th>
                                                )
                                            )}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {item.records.map((record, index) => (
                                            <tr key={index}>
                                                {Object.keys(record).map(
                                                    (key, index) => (
                                                        <td
                                                            key={index}
                                                            className={
                                                                "p-4" +
                                                                (index !==
                                                                Object.keys(
                                                                    record
                                                                ).length -
                                                                    1
                                                                    ? " border-r"
                                                                    : "")
                                                            }
                                                        >
                                                            {record[key]}
                                                        </td>
                                                    )
                                                )}
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            ))}
                        </div>
                    </div>,
                    document.body
                )}
        </>
    );
}
